// TODO: remove this fallback when 193 is out for a while
.attr-syntax-color() { @syntax-color-attribute: #888; } .attr-syntax-color();

@import "ui-variables";
@import "syntax-variables";

@font-size-small: .9em;
@type-icon-font-size: 1em;
@type-letter-icon-font-size: @font-size-small;
@row-line-height: 2em;
@item-padding: .75em;
@item-side-padding: .6em;

atom-overlay.autocomplete-plus {
  z-index: 12; // higher than docks
}

autocomplete-suggestion-list.select-list.popover-list {
  width: auto !important; // TODO: Can be removed once the inline style is gone
  display: inline-block;
  min-width: 243px; // Try and fail until the specs pass
  padding: 0;
  overflow: hidden;
  color: @text-color;

  .suggestion-list-scroller {
    overflow-y: auto;
  }

  .suggestion-description {
    padding: 5px 0;
    padding-left: @item-side-padding;
    padding-right: @item-side-padding;
    min-height: @row-line-height;
    line-height: 1.3;
    background: darken(@overlay-background-color, 4%);
    border-radius: 0 0 @component-border-radius @component-border-radius;

    // let the other sibling decide how large the container should be
    width: min-content;
    min-width: 100%;
  }

  .suggestion-description-content {
    font-size: (@font-size + 1px);
    font-family: @font-family;
    max-height: 33vh;
    display: block;
    overflow-y: auto;
    white-space: pre-wrap;
  }

  .suggestion-description-more-link {
    font-size: (@font-size + 1px);
    font-family: @font-family;
    color: @text-color-info;
  }

  input {
    position: absolute;
    opacity: 0.00;
  }

  ol.list-group {
    margin-top: 0;
    display: table;
    width: 100%;
    margin-right: 10px; // Needed to prevent horizontal scrolling when right label is too long

    li {
      display: table-row;
      color: @text-color;
      line-height: @row-line-height;

      > span {
        display: table-cell;
        vertical-align: middle;
      }

      &:after {
        clear: both;
        display: block;
        content: ' ';
      }

      &.selected {
        .word {
          color: fadeout(@text-color-selected, 20%);
        }
        .character-match {
          color: @text-color-selected;
        }
        .left-label, .right-label, .snippet-completion {
          color: fadeout(@text-color-selected, 50%);
        }
      }
    }
  }
}

autocomplete-suggestion-list {
  .icon-container {
    width: @row-line-height;
    padding-left: 0;
    padding-right: @item-padding;
    &:empty {
      width: @item-side-padding;
      padding: 0;
    }
  }

  .icon {
    display: block;
    width: @row-line-height;
    line-height: @row-line-height;
    text-align: center;
    font-style: normal;
    font-weight: bold;

    color: @text-color-subtle;
    background: fadeout(@text-color, 90%);

    &:empty { display: none; }
    > *::before {
      font-size: @type-icon-font-size;
      width: @type-icon-font-size;
      height: @type-icon-font-size;
    }

    .icon-letter {
      // I'm failing to vert center these letters. So shift them up...
      position: relative;
      top: -.1em;
      font-size: @type-letter-icon-font-size;
      line-height: @type-letter-icon-font-size;
    }
  }

  .left-label {
    text-align: right;
    padding-right: @item-padding;
    vertical-align: middle;

    font-size: @font-size-small;
    color: @text-color-subtle;

    &:empty {
      padding-right: 0;
    }
  }

  .right-label {
    padding-right: @item-padding;
    font-size: @font-size-small;
    color: @text-color-subtle;

    &:empty {
      padding-right: 0;
    }
  }

  .word-container {
    padding-right: @item-padding;
  }

  .word {
    float: left;
  }

  .character-match {
    font-weight: bold;
    color: @text-color-highlight;
  }

  .snippet-completion {
    color: @text-color-subtle;
  }

  // Here we set the max width of the popup
  .left-label {
    max-width: 20vw;
  }
  .word {
    max-width: 35vw;
  }
  .right-label {
    max-width: 25vw;
  }

  .word, .left-label, .right-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .make-type-icon(attribute, @syntax-color-attribute);
  .make-type-icon(builtin, @syntax-color-keyword);
  .make-type-icon(class, @syntax-color-class);
  .make-type-icon(constant, @syntax-color-constant);
  .make-type-icon(function, @syntax-color-function);
  .make-type-icon(import, @syntax-color-import);
  .make-type-icon(keyword, @syntax-color-keyword);
  .make-type-icon(method, @syntax-color-method);
  .make-type-icon(module, @syntax-color-import);
  .make-type-icon(mixin, @syntax-color-class);
  .make-type-icon(package, @syntax-color-import);
  .make-type-icon(property, @syntax-color-property);
  .make-type-icon(require, @syntax-color-import);
  .make-type-icon(snippet, @syntax-color-snippet);
  .make-type-icon(tag, @syntax-color-tag);
  .make-type-icon(type, @syntax-color-class);
  .make-type-icon(value, @syntax-color-value);
  .make-type-icon(variable, @syntax-color-variable);
  .make-type-icon(selector, @syntax-color-attribute);
  .make-type-icon(pseudo-selector, @syntax-color-attribute);
}

.make-type-icon(@type, @color) {
  .icon.@{type} {
    color: @color;
    background: fadeout(@color, 80%)
  }
}
.make-type-icon(@type, @color)
  when (hsvvalue(@color) - hsvvalue(@overlay-background-color) > -20)
  and (hsvvalue(@color) - hsvvalue(@overlay-background-color) < 20) {
  .icon.@{type} {
    @corrected-color: contrast(@overlay-background-color, darken(@color, 30%), lighten(@color, 30%));
    color: @corrected-color;
    background: fadeout(@corrected-color, 80%);
  }
}
